<%--
  Created by IntelliJ IDEA.
  User: 25326
  Date: 2024/9/10
  Time: 17:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>我的商品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/public.css" media="all">
    <style type="text/css">
        .layui-table-cell{
            height: auto;
            line-height: 130px;
        }
    </style>
</head>

</head>
<body>

<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">商品名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="PName" placeholder="请输入商品名称" value="" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">商品类型</label>
                            <div class="layui-input-inline">
                                <select name="PType" lay-filter="PType">
                                    <option value="">--请选择--</option>
                                    <option value="女装男装" selected>女装男装</option>
                                    <option value="鞋类箱包">鞋类箱包</option>
                                    <option value="护肤彩妆">护肤彩妆</option>
                                    <option value="汇吃美食">汇吃美食</option>
                                    <option value="手机数码">手机数码</option>
                                    <option value="其他产品">其他产品</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">商品Id</label>
                            <div class="layui-input-inline">
                                <input type="text" name="PId" class="layui-input" placeholder="请输入商品Id">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加商品 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 批量删除 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs " lay-event="detail">查看详情</a>
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="img">编辑图片</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>

<%--自定义模板--%>
<script type="text/html" id="increment">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<script src="${pageContext.request.contextPath}/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table','layer'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate,
            layer = layui.layer;

        laydate.render({
            elem: '#grade',
            type:'year'
        });

        table.render({
            elem: '#currentTableId',
            url: '${pageContext.request.contextPath}/ShopServlet?method=findAll',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: 50},
                // {field: 'increment', width: 80, title: '序号', sort: true,templet:'#increment'},
                {field: 'PId', width: 90, title: '商品ID', sort: true},
                {field: 'PName', width: 160, title: '商品名称'},
                {field: 'PType', width: 120, title: '商品类型', sort: true},
                {field: 'PNum', width: 120, title: '库存数量',sort: true},
                {field: 'PPrice', title: '单价', minWidth: 100,sort: true},
                {field: 'MId', width: 90, title: '商家ID', sort: true},
                {field: 'PImage01', width: 130, title: '商品图1',templet: function(d){
                    return '<img src="${pageContext.request.contextPath}/'+d.PImage01 +'"alt="商品图1" style="width: 100px;height: 100px;">';
                    }},
                {field: 'PImage02', width: 110, title: '商品图2',templet: function(d){
                        return '<img src="${pageContext.request.contextPath}/'+d.PImage02 +'"alt="商品图2" style="width: 100px;height: 100px;">';
                    }},
                {field: 'PImage03', width: 135, title: '商品图3',templet: function(d){
                        return '<img src="${pageContext.request.contextPath}/'+d.PImage03 +'"alt="商品图3" style="width: 100px;height: 100px;">';
                    }},
                {field: 'PSalesVolume', width: 90, title: '销量', sort: true},
                {fixed: 'right', title: '操作', minWidth: 280, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            // layer.alert(result, {
            //     title: '最终的搜索信息'
            // },{offset: ['280px', '320px']});

            // var searchParams = $.param(data.field);
            var PName = data.field.PName;
            var PType = data.field.PType;
            var PId = data.field.PId;
            console.log("PName="+PName+"PType="+PType+"PId="+PId)
            table.render({
                elem: '#currentTableId',
                url: '${pageContext.request.contextPath}/ShopServlet?method=search&PName='+PName+'&PType='+PType+'&PId='+PId,
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [[
                    {type: "checkbox", width: 50},
                    {field: 'increment', width: 80, title: '序号', sort: true,templet:'#increment'},
                    {field: 'PId', width: 90, title: '商品ID', sort: true},
                    {field: 'PName', width: 120, title: '商品名称'},
                    {field: 'PType', width: 120, title: '商品类型', sort: true},
                    {field: 'PNum', width: 90, title: '库存数量',sort: true},
                    {field: 'PPrice', title: '单价', minWidth: 150,sort: true},
                    {field: 'MId', width: 90, title: '商家ID', sort: true},
                    {field: 'PImage01', width: 130, title: '商品图1',templet: function(d){
                            return '<img src="${pageContext.request.contextPath}/'+d.PImage01 +'"alt="商品图1" style="width: 100px;height: 100px;">';
                        }},
                    {field: 'PImage02', width: 110, title: '商品图2',templet: function(d){
                            return '<img src="${pageContext.request.contextPath}/'+d.PImage02 +'"alt="商品图2" style="width: 100px;height: 100px;">';
                        }},
                    {field: 'PImage03', width: 135, title: '商品图3',templet: function(d){
                            return '<img src="${pageContext.request.contextPath}/'+d.PImage03 +'"alt="商品图3" style="width: 100px;height: 100px;">';
                        }},
                    {field: 'PSalesVolume', width: 90, title: '销量', sort: true},
                    {fixed: 'right', title: '操作', minWidth: 280, toolbar: '#currentTableBar', align: "center"}
                ]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line',
            });

            //执行搜索重载
            table.reload('currentTableId', {

                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    title: '添加商品',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    offset: ['0px', '0px'],
                    content: '03_addGoods.jsp',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;

                if (data.length === 0) {
                    layer.alert('请先选择需要删除的用户',{area: ['380px', '200px'],offset: ['280px', '320px']});
                    return;
                }

                // 提取选中商品PID
                var ids = data.map(function (item) {
                    return item.PId;
                });
                console.log(ids)

                $.post('${pageContext.request.contextPath}/ShopServlet?method=removeSelect', { "ids[]": ids }, function(response) {

                    if (response == 1) {
                        layer.msg('删除成功', { icon: 3 });
                        table.reload('currentTableId'); // 重新加载表格
                    } else {
                        layer.msg('删除失败', { icon: 4 });
                    }
                },'json');
            }
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            console.log('PId: '+data.PId);
            console.log('obj_event:'+obj.event);
            if(obj.event === "detail"){
                var index = layer.open({
                    title: '查看详情',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    offset: ['0px', '0px'],
                    area: ['100%', '100%'],
                    content: '${pageContext.request.contextPath}/ShopServlet?method=findById&PId='+data.PId+'&flag=0',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }else if (obj.event === 'edit') {

                var index = layer.open({
                    title: '编辑商品',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    offset: ['0px', '0px'],
                    content: '${pageContext.request.contextPath}/ShopServlet?method=findById&PId='+data.PId+'&flag=1',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }else if(obj.event === 'img'){
                var index = layer.open({
                    title: '编辑图片',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    offset: ['0px', '0px'],
                    area: ['100%', '100%'],
                    content: '${pageContext.request.contextPath}/page/shopping/merchant/upload.jsp?PName='+data.PName,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么',{area: ['380px', '200px'],offset: ['280px', '320px']},function (index) {
                    /*请求地址*/
                    $.get('${pageContext.request.contextPath}/ShopServlet?method=removeById',{"PId":data.PId},function (data){
                        if(data==1){
                            layer.msg('删除成功',{icon:1});
                            table.reload('currentTableId', {
                                page: {
                                    curr: 1
                                }
                            });
                        }else{
                            layer.msg('删除失败',{icon:2});
                        }
                    },'json');

                    layer.close(index);
                });
            }
        });

    });
</script>

</body>
</html>
